<template>
<div>
	<p>
		<Button @click="handleShowCreateTemplateModal(null)">添加配送信息</Button>
	</p>

	<p mgt2>
		<span>固定运费模板</span>
		<span v-if="shipSetting.shippingTemplateType==0" red>(使用中)</span>
	</p>
	<table class="minitable" text-center long mgt2>
		<tr bg-gray5 mgt2>
			<td>配送方式</td>
			<td>费用(￥)</td>
			<td w4>排序</td>
			<td w5>配送区域</td>
			<td w3>包邮</td>
			<td w5>包邮条件</td>
			<td w3>启用</td>
			<td w5>操作</td>
		</tr>
		<tr v-for="(item, index) in items" v-if="item.templateType==0" :key="index">
			<td>
				<span>{{item.displayName}}</span>
				<span v-if="item.allowFreeShipping">(包邮)</span>
			</td>
			<td>{{item.freight}}</td>
			<td></td>
			<td>
				<span linkable blue pdx1 @click="handleShowAreaModal(item)">查看</span>
				<span linkable blue pdx1 @click="handleShowEditAreaModal(item)">编辑</span>
			</td>
			<td><Checkbox v-model="item.allowFreeShipping" @on-change="handleAllowFreeShippingChange(item)" /></td>
			<td>
				<span v-if="item.allowFreeShipping" linkable blue pdx1>查看</span>
				<span v-if="item.allowFreeShipping" linkable blue pdx1>编辑</span>
			</td>
			<td><Checkbox v-model="item.enabled" @on-change="handleEnabledChange(item)" /></td>
			<td>
				<span linkable blue pdx1 @click="handleShowCreateTemplateModal(item)">编辑</span>
				<span linkable blue pdx1 @click="handleDelete(item.id)">删除</span>
			</td>
		</tr>
	</table>

	<p mgt2>
		<span>阶梯运费模板</span>
		<span v-if="shipSetting.shippingTemplateType==1" red>(使用中)</span>
	</p>
	<table class="minitable" text-center long mgt2>
		<tr bg-gray5 mgt2>
			<td>配送方式</td>
			<td>首件</td>
			<td>首费(￥)</td>
			<td>续件</td>
			<td>续费(￥)</td>
			<td w4>排序</td>
			<td w5>配送区域</td>
			<td w3>包邮</td>
			<td w5>包邮条件</td>
			<td w3>启用</td>
			<td w5>操作</td>
		</tr>
		<tr v-for="(item, index) in items" v-if="item.templateType==1" :key="index">
			<td>
				<span>{{item.displayName}}</span>
				<span v-if="item.allowFreeShipping">(包邮)</span>
			</td>
			<td>{{item.firstNumber}}</td>
			<td>{{item.freight}}</td>
			<td>{{item.addedNumber}}</td>
			<td>{{item.addedFreight}}</td>
			<td></td>
			<td>
				<span linkable blue pdx1 @click="handleShowAreaModal(item)">查看</span>
				<span linkable blue pdx1 @click="handleShowEditAreaModal(item)">编辑</span>
			</td>
			<td><Checkbox v-model="item.allowFreeShipping" @on-change="handleAllowFreeShippingChange(item)" /></td>
			<td>
				<span v-if="item.allowFreeShipping" linkable blue pdx1>查看</span>
				<span v-if="item.allowFreeShipping" linkable blue pdx1>编辑</span>
			</td>
			<td><Checkbox v-model="item.enabled" @on-change="handleEnabledChange(item)" /></td>
			<td>
				<span linkable blue pdx1 @click="handleShowCreateTemplateModal(item)">编辑</span>
				<span linkable blue pdx1 @click="handleDelete(item.id)">删除</span>
			</td>
		</tr>
	</table>

	<Modal v-model="showCreateTemplateModal" :title="model.id?'修改运费模板':'添加运费模板'" :mask-closable="false">
		<Form :ref="formRef" :model="model" :label-width="100">
			<FormItem label="唯一名称" prop="name" required>
				<Input v-model="model.name" :disabled="!!model.id" />
			</FormItem>
			<FormItem label="名称" prop="displayName" required>
				<Input v-model="model.displayName" />
			</FormItem>
			<FormItem label="模板类型" prop="templateType" required>
				<Select v-model="model.templateType" w7 mgr2>
					<Option :value="0">固定运费</Option>
					<Option :value="1">阶梯运费</Option>
				</Select>
			</FormItem>
			<div v-if="model.templateType==0">
				<FormItem label="运费" prop="freight" required>
					<InputNumber v-model="model.freight" :min="0" />
				</FormItem>
			</div>
			<div v-if="model.templateType==1">
				<FormItem label="首件" prop="firstNumber" required>
					<InputNumber v-model="model.firstNumber" :min="1" />
				</FormItem>
				<FormItem label="首费" prop="freight" required>
					<InputNumber v-model="model.freight" :min="0" />
				</FormItem>
				<FormItem label="续件" prop="addedNumber" required>
					<InputNumber v-model="model.firstNumber" :min="1" />
				</FormItem>
				<FormItem label="续费" prop="addedFreight" required>
					<InputNumber v-model="model.addedFreight" :min="0" />
				</FormItem>
			</div>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleCreateTemplate">{{model.id?'保存':'添加'}}</Button>
            <Button @click="showCreateTemplateModal=false">取消</Button>
        </div>
	</Modal>

	<template-area v-model="areaModel.showModal" :selectable="areaModel.selectable" :shippingTemplate="areaModel.shippintTemplate"></template-area>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase';
import TemplateArea from './template-area.vue'

@Component({
	components: { TemplateArea }
})
export default class ShipTemplateSetting extends AbpBase{
	showCreateTemplateModal:Boolean = false;
	areaModel:any = {
		showModal: false,
		shippintTemplate: null,
		selectable: false
	}
	formRef:string = this.getRandomRef('shiptemplate-form');
	model:any = this.getDefaultModel();
	items:Array<any> = []
	get shipSetting() {
		return this.$store.state.setting.settings.ship;
	}
	getDefaultModel() {
		return{
			name: "",
			displayName: "",
			enabled: true,
			templateType: 0,
			freight: 0,
			firstNumber: 1,
			addedNumber: 1,
			addedFreight: 0
		}
	}
	handleShowCreateTemplateModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
		}else {
			this.model = Object.assign({}, item);
		}
		this.showCreateTemplateModal = true;
	}
	handleCreateTemplate() {
		this.validate(this.formRef, async () => {
			var response;
			if(this.model.id) {
				response = await this.put('ShippingTemplate/Update', this.model);
			}else {
				response = await this.post('ShippingTemplate/Create', this.model);
			}

			if(response.success) {
				this.getAll();
				this.showCreateTemplateModal = false;
			}
		});
	}
	handleShowAreaModal(item) {
		this.areaModel.shippintTemplate = item;
		this.areaModel.selectable = false;
		this.areaModel.showModal = true;
	}
	handleShowEditAreaModal(item) {
		this.areaModel.shippintTemplate = item;
		this.areaModel.selectable = true;
		this.areaModel.showModal = true;
	}
	async handleEnabledChange(item) {
		if(item.enabled) {
			var response = await this.post('ShippingTemplate/SetEnabled', { id: item.id });
			if(response.success) {
				this.$Message.success('已启用');
				this.getAll();
			}
		}else {
			var response = await this.post('ShippingTemplate/SetDisabled', { id: item.id });
			if(response.success) {
				this.$Message.success('关闭启用');
				this.getAll();
			}
		}
	}
	async handleAllowFreeShippingChange(item) {
		var response = await this.post('ShippingTemplate/SetFreeShipping', { id: item.id, allowFreeShipping: item.allowFreeShipping });
		if(response.success) {
			this.getAll();
		}
	}
	handleDelete(id) {
		this.confirm('确认删除该运费模板吗？', async () => {
			var response = await this.delete('ShippingTemplate/Delete', { id: id });
			if(response.success) {
				this.getAll();
			}
		});
	}
	async getAll() {
		var response = await this.get('ShippingTemplate/GetAll');
		if(response.success) {
			this.items = response.result;
		}
	}
	async created() {
		this.getAll();
	}
}
</script>